<!-- 表格配置 -->
<template>
  <div>
    <el-form-item label="字体位置">
      <avue-select v-model="main.activeOption.textAlign"
                   :dic="dicOption.textAlign">
      </avue-select>
    </el-form-item>
    <el-form-item label="字体大小">
      <avue-input-number v-model="main.activeOption.fontSize"/>
    </el-form-item>
    <el-form-item label="显示行数">
      <avue-input-number v-model="main.activeOption.vis"/>
    </el-form-item>
    <el-form-item label="行高">
      <avue-input-number v-model="main.activeOption.rowHeight"/>
    </el-form-item>
    <el-form-item label="开启滚动">
      <avue-switch v-model="main.activeOption.isRoll"/>
    </el-form-item>
    <template v-if="main.activeOption.isRoll">
      <el-form-item label="动画效果">
        <avue-select v-model="main.activeOption.effect"
                     :dic="[{ label: '上滚动', value: 'top' }, { label: '上循环滚动', value: 'topLoop' }]">
        </avue-select>
      </el-form-item>
      <el-form-item label="滚动间隔(ms)">
        <avue-input-number v-model="main.activeOption.interTime"/>
      </el-form-item>
      <el-form-item label="动效时间(ms)">
        <avue-input-number v-model="main.activeOption.delayTime"/>
      </el-form-item>
      <el-form-item label="滚动行数">
        <avue-input-number v-model="main.activeOption.scroll"/>
      </el-form-item>
    </template>
    <el-form-item label="边框线">
      <avue-switch v-model="main.activeOption.isLine"/>
    </el-form-item>
    <template v-if="main.activeOption.isLine">
      <el-form-item label="边框宽度">
        <avue-input-number :max="10" v-model="main.activeOption.borderWidth"/>
      </el-form-item>
      <el-form-item label="边框颜色">
        <avue-input-color v-model="main.activeOption.borderColor"/>
      </el-form-item>
    </template>
    <el-collapse accordion>
      <el-collapse-item title="表头设置">
        <el-form-item label="开启显隐">
          <avue-switch v-model="main.activeOption.isHeader"/>
        </el-form-item>
        <el-form-item label="字体颜色">
          <avue-input-color v-model="main.activeOption.headColor"/>
        </el-form-item>
        <el-form-item label="背景颜色">
          <avue-input-color v-model="main.activeOption.headBackColor"/>
        </el-form-item>
        <el-form-item label="字体大小">
          <avue-input-number v-model="main.activeOption.headerFontSize"/>
        </el-form-item>
        <el-form-item label="字体粗细">
          <avue-select v-model="main.activeOption.headerFontWeight" :dic="dicOption.fontWeight"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="表体设置">
        <el-form-item label="字体大小">
          <avue-input-number v-model="main.activeOption.bodyFontSize"/>
        </el-form-item>
        <el-form-item label="字体粗细">
          <avue-select v-model="main.activeOption.fontWeight" :dic="dicOption.fontWeight"/>
        </el-form-item>
        <el-form-item label="字体颜色">
          <avue-input-color v-model="main.activeOption.bodyColor"/>
        </el-form-item>
        <el-form-item label="表格背景色">
          <avue-input-color v-model="main.activeOption.tableBgColor"/>
        </el-form-item>
        <el-form-item label="奇行背景颜色">
          <avue-input-color v-model="main.activeOption.oldColor"/>
        </el-form-item>
        <el-form-item label="偶行背景颜色">
          <avue-input-color v-model="main.activeOption.eventColor"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="表格列设置">
        <avue-crud :option="tableOption"
                   :data="main.activeOption.column"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @row-update="rowUpdate"/>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { tableOption, dicOption } from '@/option/config'

export default {
  data () {
    return {
      dicOption: dicOption,
      tableOption: tableOption,
      colorOption: {
        menuWidth: 80,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 100,
        column: [{
          label: '颜色',
          prop: 'color',
          type: 'color',
        }]
      }
    }
  },
  inject: ["main"],
  methods: {
    rowSave (row, done) {
      this.main.activeOption.column.push(row);
      done()
    },
    rowDel (row, index) {
      this.main.activeOption.column.splice(index, 1);
    },
    rowUpdate (row, index, done) {
      this.main.activeOption.column.splice(index, 1, row);
      done()
    },
    colorSave (row, done) {
      this.main.activeOption.orderColorList.push(row);
      done()
    },
    colorDel (row, index) {
      this.main.activeOption.orderColorList.splice(index, 1);
    },
    colorUpdate (row, index, done) {
      this.main.activeOption.orderColorList.splice(index, 1, row);
      done()
    },
  }
}
</script>

<style>
</style>
